<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-09-06 16:18:43
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 11:13:51
-->
<div class="ex-management">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>人员工时管理</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <!-- 查询框 -->
                <div class="query-box">
                    <span class="ui-float-label quality-dept">
                        <span class="text">型号</span>
                        <p-dropdown name="model" #modelSelect="ngModel" [options]="modelOption" [(ngModel)]="model"
                            [filter]="true" dataKey="value" filterBy="label" [optionLabel]="'label'" placeholder="请选择"
                            (onChange)="onChange($event)">
                        </p-dropdown>
                    </span>
                    <span class="ui-float-label quality-dept">
                        <span class="text">发次</span>
                        <p-dropdown (onChange)="getPersonList($event)" name="lotNo" #lotNoSelect="ngModel"
                            [options]="LotNoList" [(ngModel)]="lotNo" dataKey="value" [optionLabel]="'label'"
                            placeholder="请选择">
                        </p-dropdown>
                    </span>
                    <span class="ui-float-label quality-dept">
                        <span class="text">人员：</span>
                        <p-multiSelect [panelStyle]="{width:'150px'}" [options]="personList" name="person" #personSelect="ngModel" [(ngModel)]="person"
                            defaultLabel="请选择人员" required optionLabel="label" dataKey="value">
                        </p-multiSelect>
                    </span>

                    <span class="p-field ml">
                        <span class="input-lable">日期：</span>
                        <p-calendar [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true"></p-calendar>
                    </span>
                    <p-button label="查询" (onClick)="getTableList($event)" class="query-btn"></p-button>
                    <p-button label="重置" (onClick)="reset()" class="query-btn"></p-button>
                    <p-button *ngIf="'Pages.PersonnelManagement.Export' | permission" label="导出" (onClick)="outExcel()" class="query-btn"></p-button>

                </div>
                <!-- 表格 -->
                <div class="row align-items-center" style="margin-top: 25px;">
                    <div class="primeng-datatable-container">
                        <p-table #dataTable [value]="primengTableHelper.records" (onLazyLoad)="getTableList($event)"
                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                            [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 80px;">序号</th>
                                    <th style="width: 150px">人员</th>
                                    <th style="width: 150px">任务编号</th>
                                    <th style="width: 150px">型号</th>
                                    <th style="width: 150px">发次</th>
                                    <th style="width: 150px">规程编号</th>
                                    <th style="width: 150px">规程名称</th>
                                    <th style="width: 150px">工序图号</th>
                                    <th style="width: 150px">工序名称</th>
                                    <th style="width: 150px">工步图号</th>
                                    <th style="width: 150px">工步名称</th>
                                    <th style="width: 150px">报工时间</th>
                                    <th style="width: 150px">标准工时</th>
                                    <th style="width: 150px">提报工时</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record let-rowIndex="rowIndex">
                                <tr>
                                    <td style="width: 80px;">{{rowIndex+1}}</td>
                                    <td style="width: 150px">{{record.userName}}</td>
                                    <td style="width: 150px">{{record.jobNumber}}</td>
                                    <td style="width: 150px">{{record.model}}</td>
                                    <td style="width: 150px">{{record.lotNo}}</td>
                                    <td style="width: 150px">{{record.techniqueNumber}}</td>
                                    <td style="width: 150px">{{record.techniqueName}}</td>
                                    <td style="width: 150px">{{record.drawingNo}}</td>
                                    <td style="width: 150px">{{record.productionName}}</td>
                                    <td style="width: 150px">{{record.workStepDrawingNo}}</td>
                                    <td style="width: 150px">{{record.workStepName}}</td>
                                    <td style="width: 150px">{{record.reportTime |date:'yyyy-MM-dd'}}</td>
                                    <td style="width: 150px">{{record.workingHour}}</td>
                                    <td style="width: 150px">{{record.reportHour}}</td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                (onPageChange)="getTableList($event)"
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                            </span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>